<template>
  <div class="departments">
    <!-- el-card
          具名插槽 header
          默认插槽：内容
 -->
    <el-card :body-style="{ padding: '60px' }">
      <h3>组织架构</h3>
      <div class="main">
        <!-- 父传子数据
               传：
                  组件标签  :属性名="值"
               收
                 props:{
                   属性名:{
                     type:数据类型
                     default:默认值(基本数据直接写,复杂数据类型()=>{return 复杂数据类型}})   10  [10]
                     validator:(value)=>{
                       return boolean值
                       true:正常使用
                       false:报错
                     }
                   }
                 }
        增删改查
        查：
        1：定义api
        2:页面导入api
        3:进入页面调用api获取数据
        4：存储并渲染

         -->
        <TreeItem :item-info="topInfo" />
        <hr>
        <el-tree :data="treeData">
          <template v-slot="{ data }">
            <TreeItem
              :item-info="data"
              style="width: 100%"
              @getData="getData"
            />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- el-dialog
  弹框组件
     组件名:el-dialog
                title:标题
                visible:是否显示dialog弹框
                width:宽度
              默认插槽：弹框的内容
              具名插槽(footer):底部，一般用于放 取消与确定按钮

   新增：
    1：html界面（独立封装成一个组件）
    2：在父组件使用
    3：组件传值能够打开与关闭弹框
    4：接口api定义
    5：导入api
    6:实现表单验证
    7：添加接口调用
    8：调用完成后的一些小处理
      a:清空表单
      b:关闭弹框
      c:提示添加成功
      d:刷新父级列表数据

   删除
     1：定义删除api
     2:导入
     3：点击调用
     4：调用成功
        提示
        刷新列表数据

    改：
    1：点击编辑打开弹框
    2：回显数据
    3：在新增弹框组件内定义一个变量值用于区分是新增还是编辑  mode='add/edit'
    4:点击新增时修改mode为add,点击编辑时修改mode为edit
    5:调整标题（区分场景）
    6：表单验证调整
    7：定义编辑api
    8:导入api
    9:点击确定时分场景调用
    10：调用成功
      a:清空表单
      b:关闭弹框
      c:提示添加成功
      d:刷新父级列表数据
 -->
    <DepartmentsAdd :init-tree-data="initTreeData" @getData="getData" />
  </div>
</template>
<script>
import TreeItem from './components/TreeItem.vue'
import { companyDepartment } from '@/api/departments'
import DepartmentsAdd from './components/DepartmentsAdd2.vue'
export default {
  components: {
    TreeItem,
    DepartmentsAdd
  },
  data() {
    return {
      topInfo: {
        name: '江苏传智教育有限公司',
        manager: '负责人',
        isTop: true,
        id: '' // 子集的pid为''
      },
      treeData: [],
      initTreeData: [] // 转换前的树形数据
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartment()
      this.initTreeData = res.data.depts
      this.treeData = this.changeData(res.data.depts)
      // console.log('第一层数据:', this.changeData(res.data.depts))
      // console.log(
      //   '财务部子集:',
      //   this.changeData(res.data.depts, '604e2251b205b95968e1312c')
      // )
      // console.log('组织架构列表', res)
    },
    // 将数据转换成树形结构  子集的pid就是父级的id
    // 1:找出第一层数据  2:写找出某个部门的子集
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          // item找出数据每一项,子集的pid就是父级的id
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 60px auto 0;
  }
}
</style>
